<template>
	<div>
		<el-dialog title="订单发货" :visible.sync="dialogVisible" width="750px" :close-on-click-modal="false" append-to-body @close="close">
			<el-form v-if="detail" ref="form" v-loading="loading" size="small" :model="form" :rules="rules" label-width="100px">
				<div v-if="detail.delivery">
					<el-form-item label="收货地址：">
						{{ detail.delivery.userName || detail.memberName || detail.customerName }}（{{ detail.delivery.phone }}）&nbsp;&nbsp;&nbsp;{{
							detail.delivery.province + detail.delivery.city + detail.delivery.country + detail.delivery.street + detail.delivery.detail
						}}
					</el-form-item>
					<el-form-item label="期望发货：">{{ detail.delivery.arrivalTime || '尽快发货' }}</el-form-item>
					<el-form-item label="顾客备注：">{{ detail.bizData && detail.bizData.remark ? detail.bizData.remark : '无' }}</el-form-item>
				</div>
				<el-divider />
				<div v-if="detail.type == 'EXPRESS'">
					<el-form-item label="物流名称：" prop="trackingName" class="w-400">
						<el-select v-model="form.trackingName" filterable :filter-method="trackingNameChange" placeholder="请选择物流名称">
							<el-option v-for="item in form.options" :key="item.value" :label="item.label" :value="item.label"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="物流单号：" prop="trackingNo" class="w-400">
						<el-input v-model="form.trackingNo" placeholder="请在此处输入物流单号" size="large" maxlength="15" clearable />
					</el-form-item>
				</div>
				<el-form-item v-else label="物流单号：" class="w-400">
					<el-input v-model="form.trackingNo" placeholder="请在此处输入物流单号" size="large" maxlength="15" clearable />
				</el-form-item>
				<el-form-item label="发货备注：">
					<el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" maxlength="100" show-word-limit />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div class="flexCCC">
					<el-button size="large" round type="primary" class="btn-submit" :disabled="loading" @click="submit">信息无误，确认发货</el-button>
					<el-button size="text" round :disabled="loading" @click="hide">取 消</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { orderDeliver, getExpressName } from '@/views/wxaMallModule/api/order';
export default {
	data() {
		return {
			// 校验字段
			rules: {
				trackingNo: [
					{
						validator: (rules, value, callback) => {
							const reg = /^[\da-z]+$/i;
							if (value == '' || value == undefined || value == null || !reg.test(value)) {
								return callback(new Error('长度不超过15位数字英文字符'));
							} else {
								callback();
							}
						},
						required: true,
						trigger: ['blur']
					}
				],
				trackingName: [
					{
						required: true,
						message: '请选择物流名称',
						trigger: ['blur', 'change']
					}
				]
			},
			// 配置
			resolve: null,
			reject: null,
			// 状态
			dialogVisible: null,
			loading: false,
			// 数据
			detail: null,
			form: {
				orderNo: null,
				remark: null,
				trackingNo: null,

				// 物流名称
				options: [],
				trackingName: '',
				trackingInput: ''
			}
		};
	},
	methods: {
		/**
		 * 弹框相关
		 */
		open({ detail }) {
			this.detail = detail;
			console.log(this.detail);
			this.show();
			return new Promise((resolve, reject) => {
				this.resolve = resolve;
				this.reject = reject;
			});
		},

		show() {
			this.dialogVisible = true;
			this.getExpressFun();
		},

		close() {
			this.form = {
				orderNo: null,
				remark: null,
				trackingNo: null,
				trackingName: null
			};
			this.loading = false;
			this.$refs.form.resetFields();
		},

		hide() {
			this.resolve = null;
			this.reject = null;
			this.dialogVisible = false;
		},

		/**
		 * 数据组
		 */

		/**
		 * 按钮组
		 */
		// 确 定
		submit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.form.orderNo = this.detail.orderNo;
					// this.form.remark = this.detail.remark;
					this.loading = true;
					orderDeliver(this.form)
						.then(res => {
							this.$notify({
								title: '成功',
								message: '发货成功',
								type: 'success',
								duration: 2000,
								offset: 40
							});
							this.resolve && this.resolve();
							this.hide();
						})
						.catch(err => {})
						.finally(() => {
							this.loading = false;
						});
				}
			});
		},
		/**
		 * 状态组
		 */

		/**
		 * 方法组
		 */
		// 物流公司
		getExpressFun() {
			let params = { name: this.form.trackingInput };
			getExpressName(params).then(res => {
				this.form.options = [];
				res.data.forEach((el, index) => {
					let lis = {
						value: index,
						label: el
					};
					this.form.options.push(lis);
				});
				this.form = Object.assign({}, this.form);
			});
		},
		trackingNameChange(e) {
			this.form.trackingInput = e;
			this.getExpressFun();
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// .w-400 {
//   width: 400px;
//   display: block;
//   margin: 0 auto;
// }
.btn-submit {
	margin-bottom: 20px;
}
</style>
